<template>
  <!-- 定义echarts需要控制的dom元素 -->
  <div :style="{height:height,width:width}"/>
</template>
<script>
import * as echarts from 'echarts';


export default {
  name: 'App',
  data() {
    return {
      height: '500px',
      width: '610px',

      /*echarts数据*/
      chartData: {}
    }
  },
  mounted() {
    // dom元素加载完成后执行
    this.$nextTick(() => {
      // 初始化echarts实例
      this.initEcharts()
    })
  },
  methods: {
    initEcharts() {
      // 定义一个图表数据
      /*      this.chartData = {
              expectedData: [190, 100, 10, 9, 170, 110, 160],
              actualData: [120, 200, 150, 80, 70, 110, 130]
            }*/

      //参数一:this.$el指向当前组件template模板中的根标签(在mounted生命周期中才有效)
      //参数二:echarts主题颜色
      this.chart = echarts.init(this.$el,"macarons")
      this.setOptions()

    },
    setOptions() {
      let option ={
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          textStyle: {
            color: "white" //设置文字颜色
          },
        },
        legend: {
          padding: [
            10,
            0,
            30,
            0
          ],
          align: 'left',
          orient: 'horizontal',
          left: 'center',
          textStyle: {//图例文字的样式
            color: '#000000'
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['群组1', '群组2', '群组3', '群组4', '群组5']
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '群组人数',
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: [15, 5, 18, 11, 13, 5, 12]
          },
        ]
      };
      this.chart.setOption(option);
    }
  }
}
</script>
